---
type: tutorial
title: Erstelle ein individuelles Blog-Layout und übergib Daten
description: >-
  Tutorial: Erstelle deinen ersten Astro-Blog —
  Erstelle ein Blog-Beitrags-Layout für deine Markdown-Dateien und übergib Frontmatter-Werte als Props
i18nReady: true
---

import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"

Jetzt, da du ein Layout für deine Seiten hast, ist es Zeit, ein Layout für Blog-Beiträge hinzuzufügen!

<PreCheck>
  - ein neues Blog-Beitrags-Layout für deine Markdown-Dateien zu erstellen
  - YAML-Frontmatter-Werte als Props an die Layout-Komponente zu übergeben
</PreCheck>

## Füge ein Layout zu deinen Blog-Beiträgen hinzu

Wenn du die Frontmatter-Eigenschaft `layout` in einer `.md`-Datei angibst, stehen alle Frontmatter-YAML-Werte der Layout-Datei zur Verfügung.

<Steps>
1. Erstelle eine neue Datei unter `src/layouts/MarkdownPostLayout.astro`

2. Kopiere den folgenden Code in `MarkdownPostLayout.astro`

    ```astro title="src/layouts/MarkdownPostLayout.astro"
    ---
    const { frontmatter } = Astro.props;
    ---
    <meta charset="utf-8" />
    <h1>{frontmatter.title}</h1>
    <p>Geschrieben von {frontmatter.author}</p>
    <slot />
    ```

3. Füge die folgende Frontmatter-Eigenschaft in `post-1.md` ein:

    ```markdown title="src/pages/posts/post-1.md" ins={2}
    ---
    layout: ../../layouts/MarkdownPostLayout.astro
    title: 'Mein erster Blog-Beitrag'
    pubDate: 2022-07-01
    description: 'Dies ist der erste Beitrag meines neuen Astro-Blogs.'
    author: 'Astro-Lernender'
    image:
        url: 'https://docs.astro.build/assets/rose.webp' 
        alt: 'Das Astro-Logo auf dunklem Hintergrund mit rosa Leuchten.'
    tags: ["astro", "bloggen", "öffentlich lernen"]
    ---
    ```

4. Prüfe die Vorschau im Browser erneut unter `http://localhost:4321/posts/post-1` und beachte, was das Layout deiner Seite hinzugefügt hat.  

5. Füge dieselbe Layout-Eigenschaft zu deinen beiden anderen Blog-Beiträgen `post-2.md` und `post-3.md` hinzu. Überprüfe im Browser, ob das Layout auch auf diese Beiträge angewendet wird.
</Steps>

:::tip
Beim Verwenden von Layouts hast du nun die Möglichkeit, Elemente wie einen Seitentitel im Markdown-Inhalt oder im Layout zu platzieren. Prüfe die Vorschau deiner Seite visuell und nimm Anpassungen vor, um doppelte Elemente zu vermeiden.
:::

<Box icon="puzzle-piece">

## Probiere es selbst – Passe dein Blog-Layout an

**Aufgabe**: Identifiziere Elemente, die bei jedem Blog-Beitrag gleich sind, und verwende `MarkdownPostLayout.astro`, um sie zu rendern, anstatt sie in deinem Markdown (`post-1.md`) oder in zukünftigen Beiträgen zu wiederholen.

Hier ein Beispiel, wie du `pubDate` in die Layout-Komponente verschiebst, anstatt es im Markdown zu schreiben:

```markdown title="src/pages/posts/post-1.md" del={1}
Veröffentlicht am: 2022-07-01

Willkommen zu meinem *neuen Blog* über das Lernen von Astro! Hier teile ich meinen Lernweg, während ich eine neue Website erstelle.
```

```astro title="src/layouts/MarkdownPostLayout.astro" ins={6}
---
const { frontmatter } = Astro.props;
---
<meta charset="utf-8" />
<h1>{frontmatter.title}</h1>
<p>Veröffentlicht am: {frontmatter.pubDate.toString().slice(0,10)}</p>
<p>Geschrieben von {frontmatter.author}</p>
<slot />
```

Refaktoriere so viel wie nötig für dich und füge beliebig viele Elemente in dein Layout ein. Alles, was du ins Layout einfügst, musst du nicht mehr in jedem einzelnen Blog-Beitrag schreiben!

Hier ein Beispiel für ein refaktoriertes Layout, das nur noch die individuellen Inhalte der Blog-Beiträge über den Slot rendert:

```astro title="src/layouts/MarkdownPostLayout.astro"
---
const { frontmatter } = Astro.props;
---
<meta charset="utf-8" />
<h1>{frontmatter.title}</h1>
<p>{frontmatter.pubDate.toString().slice(0,10)}</p>
<p><em>{frontmatter.description}</em></p>
<p>Geschrieben von: {frontmatter.author}</p>
<img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
<slot />
```
</Box>

:::note[Doppelte Inhalte vermeiden]
Alles, was von deinem Layout gerendert wird, muss **nicht** in deinem Blog-Beitrag erneut geschrieben werden! Wenn du bei der Vorschau im Browser Duplikate bemerkst, entferne den entsprechenden Inhalt aus der Markdown-Datei.
:::

<Box icon="question-mark">

### Teste dein Wissen

Kannst du herausfinden, was in die Lücken gehört, damit die beiden folgenden Komponenten zusammen funktionierenden Astro-Code ergeben?

1.  ```markdown title="src/pages/posts/learning-astro.md"
    ---
    layout: ../../__________/MyMarkdownLayout.astro
    title: "Markdown in Astro kennenlernen"
    author: Astro-Lernender
    ____: 2022-08-08
    ---
    Heute habe ich so viel gelernt! Astro erlaubt mir, in Markdown zu schreiben, und gleichzeitig Variablen aus dem Frontmatter zu verwenden. Ich kann diese Werte sogar in einer Astro-Layout-Komponente abrufen.
    ```

2.  ```astro title="src/layouts/MyMarkdownLayout.astro"
    ---
    import ____________ from '../components/Footer.astro'
    const { ___________ } = Astro.props
    ---
    <h1>{frontmatter.title}</h1>
    <p>Geschrieben von: {frontmatter.______} am {frontmatter.pubDate}</p>
    < _______ />
    <Footer />
    ```
    <details>
        <summary>Lösungen für die Lücken anzeigen</summary>

        1.  ```markdown title="src/pages/posts/learning-astro.md" "layouts" "pubDate"
            ---
            layout: ../../layouts/MyMarkdownLayout.astro
            title: "Markdown in Astro kennenlernen"
            author: Astro-Lernender
            pubDate: 2022-08-08
            ---
            Heute habe ich so viel gelernt! Astro erlaubt mir, in Markdown zu schreiben, und gleichzeitig Variablen aus dem Frontmatter zu verwenden. Ich kann diese Werte sogar in einer Astro-Layout-Komponente abrufen.
            ```

        2.  ```astro title="src/layouts/MyMarkdownLayout.astro" " Footer " " frontmatter " "author" "slot"
            ---
            import Footer from '../components/Footer.astro'
            const { frontmatter } = Astro.props
            ---
            <h1>{frontmatter.title}</h1>
            <p>Geschrieben von: {frontmatter.author} am {frontmatter.pubDate}</p>
            <slot />
            <Footer />
            ```
    </details>
</Box>

<Box icon="check-list">

## Checkliste

<Checklist>
- [ ] Ich kann die Layout-Eigenschaft in das YAML-Frontmatter eines Markdown-Blog-Beitrags einfügen.
- [ ] Ich kann ein separates Layout für Markdown-Beiträge erstellen.
- [ ] Ich kann Werte aus dem Frontmatter eines Blog-Beitrags in einer Layout-Komponente verwenden.
</Checklist>

</Box>

### Ressourcen

- [Markdown-Layouts in Astro](/de/guides/markdown-content/#frontmatter-layout-property)

- [Markdown-Layout-Eigenschaften](/de/basics/layouts/#markdown-layout-eigenschaften)

- [Einführung in YAML](https://dev.to/paulasantamaria/introduction-to-yaml-125f) <Badge class="neutral-badge" text="extern" />
